<template>
  <div style="width: 100%;height:100%;">
    <!-- 商品分类 -->
    <div class="shoptype" style="width:100%;min-height:700px;margin:0 auto">
      <div class="shoptypeTitle">
        <Button type="success" @click="addDistance" style="border-color:#19BE6B;font-size:16px;margin-right:15px;">+ 添加</Button>
      </div>
      <div class="shoptype-content">
        <Table size="large" :columns="columns" :data="tabledata"></Table>
      </div>
    </div>
    <Modal v-model="modal1" title="添加商城公告" @on-ok="ok1" @on-cancel="cancel1">
      <Form ref="formItem" :model="formItem" :label-width="120" :rules="ruleValidate">
        <FormItem label="商城公告名称" prop="name">
            <Input v-model="formItem.name" placeholder="请输入商城公告名称"/>
        </FormItem>
      </Form>
    </Modal>
    <div class="cominfo">Copyright © 2017 华市科技, All Rights Reserved.</div>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import { notice_list, add_notice, del_notice } from "../../api/set/set.js";
export default {
  data() {
    return {
      value: "",
      modal1: false,
      modal2: false,
      formItem: {
        name: ""
      },
      columns: [
        {
          title: "商城公告名称",
          key: "name",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("Poptip",{
                  props: {
                    confirm: true,
                    title: '确定删除该条公告吗？'
                  },
                  on: {
                    'on-ok': () => {
                      del_notice({ id: params.row.id }).then(res => {
                        this.tabledata.splice(params.index, 1);
                        this.$Message.success("删除成功！");
                      });
                    },
                    'on-cancel': () => {
                      this.$Message.info('已取消该次操作');
                    }
                  }
                },[
                  h('Button', {
                    props: {
                        type: 'error',
                        size: 'small'
                    },
                    style: {
                        marginRight: '5px'
                    },
                  }, '删除')
                ])
            ]);
          }
        }
      ],
      tabledata: [],
      ruleValidate: {
        name: [
          { required: true, message: "请输入商城公告", trigger: "blur" }
        ]
      },
      index: 0,
      id: 1
    };
  },
  methods: {
    ...mapActions(["checkSettingsIndex", "checkToken"]),
    // 添加配送
    addDistance() {
      this.modal1 = true;
      this.formItem.name = '';
    },
    ok1() {
      add_notice( this.formItem ).then(res => {
        this.getData();
        this.$Message.success("添加成功！");
      });
    },
    cancel1() {},
    // 编辑
    editDistance(id, index, row) {
      this.modal2 = true;
      this.id = id;
      this.formItem.name = row.nam;
    },
    ok2() {
      console.log(this.id)
      edit_distance( Object.assign(
        {},
        {id: this.id},
        // {token: 1},
        this.formItem
      ) ).then(res => {
        this.getData();
        this.$Message.success("编辑成功！");
      });
    },
    cancel2() {},
    getData() {
      notice_list({
        
      }).then(res => {
        console.log(res)
        this.tabledata = res.data;
      });
    }
  },
  beforeCreate() {
    this.$store.dispatch("checkSettingsIndex", "noticeSet");
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
.shoptype {
  > .shoptypeTitle {
    padding: 10px 0;
    overflow: hidden;
    > Button {
      float:right;
    }
  }
}
</style>